<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>显示所有的游戏信息</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
    <script src="${path}/resources/dist/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
</head>
<body>
<div id="app">
    <template>


    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="bookSelect" class="user-search">
            <el-form-item label="搜索：">
                <el-col :span="4" style="margin-right: 5px">
                    <el-input v-model="bookSelect.bookId" placeholder="书籍ID"></el-input>
                </el-col>
                <el-col  :span="4" style="margin-right: 5px">
                    <el-input v-model="bookSelect.bookName" placeholder="书籍名称" ></el-input>
                </el-col>
                <el-col  :span="4" style="margin-right: 5px">
                    <el-select v-model="bookSelect.fTypeId" placeholder="请选择" @visible-change="ftypeChange" @change="sonChange">
                        <el-option
                                v-for="item in cascade"
                                :key="item.booktypeid"
                                :label="item.booktypename"
                                :value="item.booktypeid">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" style="margin-right: 5px">
                    <el-select v-model="bookSelect.stypeId" placeholder="请选择">
                        <el-option
                                v-for="item in sonCascade"
                                :key="item.booktypeid"
                                :label="item.booktypename"
                                :value="item.booktypeid">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button size="medium"  type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-col>
            </el-form-item>
        </el-form>


        <div style="margin: 5px">
            <el-button type="primary" @click="addBook">添加书籍</el-button>
        </div>

        <!--列表-->
        <el-table size="small" :data="bookList" highlight-current-row v-loading="loading" border
                  element-loading-text="拼命加载中"
                  style="width: 100%;">
            <el-table-column prop="bookId" label="书籍ID" width="150"></el-table-column>
            <el-table-column prop="bookName" label="书籍名称" width="150"></el-table-column>
            <el-table-column prop="authorName" label="作者" width="150"></el-table-column>
            <el-table-column prop="fTypeId" label="一级分类Id" width="150"></el-table-column>
            <el-table-column prop="bookTypeName" label="一级分类名称" width="150"></el-table-column>
            <el-table-column prop="stypeId" label="二级分类Id" width="150"></el-table-column>
            <el-table-column prop="parentName" label="二级分类名称" width="150"></el-table-column>
            <el-table-column prop="bookStatus" label="更新状态" width="250">
                <template slot-scope="scope">
                    {{scope.row.bookStatus==1?"完结":"连载"}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="initUpdate(scope.row)" type="primary" size="small">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                       layout="sizes, prev, pager, next, jumper"
                       :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                       :current-page="pageInfo.page"></el-pagination>

        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
            <el-form :model="editForm" :rules="rules" ref="editForm" class="demo-ruleForm">
                <el-form-item label="书籍名称" prop="bookName" :label-width="formLabelWidth">
                    <el-form hidden v-model="editForm.bookId"></el-form>
                    <el-input v-model="editForm.bookName" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="一级分类" prop="fTypeId" :label-width="formLabelWidth">
                    <el-select v-model="editForm.fTypeId" @focus="ftypeChange" @change="sonChange" placeholder="请选择">
                        <el-option
                                v-for="item in cascade"  :label="item.booktypename"
                                :value="item.booktypeid"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="二级分类" prop="stypeId" :label-width="formLabelWidth">
                    <el-select v-model="editForm.stypeId" placeholder="请选择">
                        <el-option
                                v-for="item in sonCascade"
                                :label="item.booktypename"
                                :value="item.booktypeid">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="作者" prop="authorName" :label-width="formLabelWidth">
                    <el-input v-model="editForm.authorName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="更新状态" prop="bookStatus" :label-width="formLabelWidth">
                    <el-select v-model="editForm.bookStatus" placeholder="请选择">
                        <el-option label="连载" value=0></el-option>
                        <el-option label="完结" value=1></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>

                <el-button type="primary" @click="editBook('editForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    </template>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            formLabelWidth: "150",
            editFormVisible: false,
            bookSelect: {// 查询参数，搜索时的条件
                bookName: '',
                bookId: '',
                fTypeId: '',
                stypeId: '',
                method: "findAllBook", //  调用servlet类中的方法名
                page: 1,
                pageSize: 3,
            },
            cascade: [],
            sonCascade: [],
            bookList: [],//  列表数据，游戏列表
            pageInfo: { //  分页数据
                pageSize: 3,// 每页显示的数据量
                page: 1, // 当前页
                total: 0 // 总条数
            },
            op: {
                value: "booktypeid",
                label: "booktypename",
                children: [{
                    value: 'booktypeid',
                    label: 'booktypename',
                }],
            },
            editForm: {
                bookId: '',
                bookName: '',
                fTypeId: 0,
                stypeId: 0,
                authorName: '',
                bookStatus: 0,
            },
            rules: {
                bookId: [{
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }],
                bookName: [{
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }],
                fTypeId: [{
                    required: true,
                    message: '请输入',
                    trigger: 'change'
                }],
                stypeId: [{
                    required: true,
                    message: '请输入',
                    trigger: 'change'
                }],
                authorName: [{
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }],
                bookStatus: [{
                    required: true,
                    message: '请输入',
                    trigger: 'change'
                }],
            }

        }, methods: {
            addBook(){
                this.editForm = {}
                this.editFormVisible = true;// 显示对话框
                this.editForm.method = "addBook";//  调用servlet中的方法名
            },
            search() {// 搜索游戏信息
                var data = window.Qs.stringify(this.bookSelect);
                axios.post("${path}/book.do", data).then(response => {
                    vm.bookList = response.data.dataList;
                    vm.pageInfo = {
                        pageSize: response.data.pageNum,// 每页显示的数据量
                        page: response.data.nowPage, // 当前页
                        total: response.data.totalNum // 总条数
                    };
                });
            }
            ,
            currentChange(val) {// 当前页发生变化时触发的事件
                this.bookSelect.page = val;
                this.search();
            }
            ,
            sizeChange(val) {// 每页显示的数据量变化时触发的事件
                this.bookSelect.pageSize = val;
                this.search();
            }
            ,
            initUpdate(row) {// 初始化修改
                vm.editForm = {
                    bookName: row.bookName,
                    authorName: row.authorName,
                    bookId: row.bookId,
                    bookStatus: row.bookStatus.toString()
                }
                this.editFormVisible = true;// 显示对话框
                this.editForm.method = "update";//  调用servlet中的方法名
            },
            editBook(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var data = window.Qs.stringify(this.editForm);
                        axios.post("${path}/book.do", data).then(response => {
                            if ("修改成功" === response.data) {
                                this.$notify({
                                    title: '修改成功',
                                    type: 'success'
                                });
                                vm.search();
                                vm.editFormVisible = false;// 关闭对话框

                            } else {
                                this.$notify.error({
                                    title: '错误',
                                });
                            }
                        });
                    }
                });
            },
            sonChange(value) {
                axios.post("${path}/book.do?method=findAllBookSonType&booktypeid=" + value).then(response => {
                    if (response.data == "") {
                        vm.bookSelect.stypeId = null;
                        vm.sonCascade = null;
                    } else {
                        vm.sonCascade = response.data;
                        vm.bookSelect.stypeId = vm.sonCascade[0].booktypeid
                    }
                });
            },

            ftypeChange() {
                axios.post("${path}/book.do?method=findAllBookParentType").then(response => {
                    vm.cascade = response.data;
                });
            }

        }
        ,
        mounted() {
            this.search();
        }
    });
</script>
</body>
</html>
